<template lang="html">
  <CircleOne v-if="typea=='one'|typea==null" :index-data="value"></CircleOne>
  <CircleTwo v-else-if="typea=='two'"        :index-data="value" ></CircleTwo>
  <CircleThree v-else-if="typea=='three'"    :index-data="value"></CircleThree>
  <CircleFour v-else-if="typea=='four'"      :index-data="value"></CircleFour>
  <CircleFive v-else-if="typea=='five'"      :index-data="value"></CircleFive>
</template>

<script>
  import  CircleOne from  './CircleOne'
  import  CircleTwo from  './CircleTwo'
  import  CircleThree from  './CircleThree'
  import  CircleFour from  './CircleFour'
  import  CircleFive from  './CircleFive'
export default {
  name: 'wioc-circle',
  props: ['value','type'],
  data () {
    return{
        typea:'two'
    }
  },
    components:{
      CircleOne,CircleTwo,CircleThree,CircleFour,CircleFive
    },
    mounted(){
      this.typea=this.type
    }
}
</script>

<style lang="css" scoped>
</style>
